<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('短信发送')" />
	<th:block th:include="include :: select2-css" />
    <link rel="stylesheet" th:href="@{/css/layui.css}">
    <style>
        select{
            display: block;
        }
    </style>
</head>
<body>

    <div class="main-content">
        <form  class="layui-form model-form">
        <input name="id" id="id" type="hidden" value=""/>
        <input name="tel" id="tels" type="hidden"/>
        <input name="isSend" id="isSend" type="hidden" value="0"/>
        <input name="meetContext" id="meetContext" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">会议内容</label>
            <div class="layui-input-block" style=" ">
                【山西亨搏数智】您好，<input id="meetDate" class="layui-input"  onblur="reTemp('0',this.value)" placeholder="请输入会议时间" lay-verify="required" required style="width: 30%;display: inline-block;margin: 5px auto;">在
                <input id="meetAddr" placeholder="请输入会议地点"  class="layui-input" onblur="reTemp('1',this.value)" lay-verify="required" required style="width: 30%;display: inline-block;margin: 5px auto;">召开
                <input id="meetTent" placeholder="请输入会议内容"  class="layui-input" onblur="reTemp('2',this.value)" lay-verify="required" required  style="width: 60%;display: inline-block;margin: 5px auto;">，请您准时参加 ！ 综合办公室
                <br>
                <textarea name="appointTheme" id="appointTheme" readonly placeholder="请输入会议内容"  class="layui-input" maxlength="500" lay-verify="required" required
                          style="margin: 0px;width: 720px;height: 80px;line-height: 24px;">【山西亨搏数智】您好，%s1在%s2召开%s3，请您准时参加 ！ 综合办公室
                </textarea>
                <div style="color: #ff0000" >提示：短信内容最多70个汉字，目前还可输入<span id="smsNum" style="font-weight:bold " >34</span>个汉字。<span id="tips"></span></div>
            </div>
        </div>

        <div class="layui-form-item" style="display: none;">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="stime" name="stime" placeholder="HH:mm" value="14:00">
            </div>
        </div>
        <div class="layui-form-item" style="display: none;">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="etime" name="etime" placeholder="HH:mm" value="15:00">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">参会人</label>
            <div class="layui-input-block">
                <button onclick="getStudents()" id="stuBtn" class="layui-btn layui-btn-normal btn-sm ">选择</button>
                <input name="appointPerson" id="studentsName"  type="hidden" class="layui-input" maxlength="500"  readonly/>
                <div id="studentsNameDiv"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">日程提醒</label>
            <div class="layui-input-block">
                <input type="datetime-local" class="layui-input"  name="sendDate" placeholder="yyyy-MM-dd HH:mm" lay-verify="required" required>
                <!--          <select class="layui-input" name="tel">
                              <option value="5">5分钟前</option>
                              <option value="10">10分钟前</option>
                              <option value="15">15分钟前</option>
                          </select>-->

            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">通知方式</label>
            <div class="layui-input-block">
                <select class="layui-input" name="roomId">
                    <option value="0">短信通知</option>
                </select>

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">启用状态</label>
            <div class="layui-input-block">
                <select class="layui-input" name="isEnable">
                    <option value="1">启用</option>
                    <option value="0">取消</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="formSubmit" lay-submit>保存</button>
            <button class="layui-btn" type="button" id="delEdit" onclick="del()">删除</button>
        </div>
    </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
	<script>
        var meetContext=[];


        function reTemp(s,v){
            var template = "【山西亨搏数智】您好，%s0在%s1召开%s2，请您准时参加 ！ 综合办公室";
            v=v.replace(/,|，/g,'');
            meetContext[s] = v;
            $("#meetContext").val(meetContext.join(","));
            if(meetContext.length>0){
                meetContext.forEach(function (value,index,array){
                    template = template.replace('%s'+index,value);
                })
                tipsTemp(template);
            }


        }
        function tipsTemp(template){
            var snum=70-template.length;
            $("#smsNum").text(snum<0?0:snum);
            if(snum<0){
                $("#tips").text("您已超过"+((template.length)-70)+"个字,短信将不能发送。");
            }

            $("#appointTheme").val(template);
        }

        var nams = [];
        var tels = [];

        function getStudents() {
            //学员选择
            var url = "students.html";
            layer.open({
                scrollbar: false,
                type: 2,
                title: ["学员选择", true],
                area: ['80%', '90%'], //宽高
                content: url,
                shadeClose: false,
                btn: ['确定'],
                yes: function (index, layero) {
                    var $iframe = layero.find("iframe")[0].contentWindow;
                    var studentIds = $iframe.getSelectedRows();
                    console.log(studentIds);

                    if (studentIds.length > 0) {
                        $.each(studentIds, function (i, v) {
                            var rowName = $iframe.$("#jqGrid").jqGrid("getRowData", v).name;
                            var mobile = $iframe.$("#jqGrid").jqGrid("getRowData", v).mobile;
                            if(tels.indexOf(mobile)<0){
                                nams.push(rowName);
                                tels.push(mobile);
                            }


                        })
                    }


                    renderData();

                    layer.close(index);
                },
                success: function (layero, index) {
                    layero.find("iframe")[0].contentWindow.$(".grid-btn").remove();
                }
            });
        }

        function renderData(){
            $("#studentsName").val(nams.join()).change();
            $("#tels").val(tels.join());
            if(nams.length>0){
                var str = "";
                nams.forEach(function(v,i){
                    if(str==""){
                        str += nams[i]+'<span class="del-tag"  onclick="delTag('+i+')">x</span>';
                    }else{
                        str +=  ',<span style="margin: 0 7px;"></span>'+nams[i]+'<span class="del-tag" onclick="delTag('+i+')">x</span>';
                    }
                })


                $("#studentsNameDiv").html(str);
            }else{
                $("#studentsNameDiv").html('');
            }

        }

        function delTag(i){
            nams.splice(i,1);
            tels.splice(i,1);
            renderData();
        }
    </script>
</body>
</html>